<template>
    <div class="set">
        <img src="../trade-list/img/back.png"
             @click="$router.replace('setDanger')" />
        <div class="setContainer"
             id="img-container">
            <img :src="imgUrl" />
            <div class="newADD"
                 v-for="(item,idx) in coordInfos"
                 v-bind:key="idx"
                 :style="{left:item.x+'px',top: item.y+'px',width:item.w+'px',height:item.h+'px'}">
                <div class="left">{{idx+1}}</div>
            </div>
        </div>
        <p class="setBtn">
            <span style="width:100%;"
                  @click='startUpload'>完成上传</span>
        </p>
        <el-dialog title="提示"
                   width='80%'
                   :visible.sync="flag1">
            <div class="tit">
                <i class="el-icon-warning"></i>
                <p> {{titContent}}</p>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {
    mapState,
    mapActions
} from 'vuex'
import errImgUrl from '@/components/trade-list/img/error.png'
import wx from 'weixin-js-sdk'
export default {
    data () {
        return {
            imgUrl: localStorage.getItem('uploadImg'),
            coordInfos: JSON.parse(localStorage.getItem('coordInfos')),
            titContent: '',
            openid: '',
            flag: true,
            loginJson: '',
            weChatName: '',
            weChatUrl: '',
            flag1: false,
        }
    },
    created () {
        var code = window.location.href.split('&')[0].split('=')[1]
        if (code) {
            this.getOpenId()
        } else {
            this.goRegister()
        }
    },
    methods: {
        goRegister () {
            var url1 = encodeURIComponent(window.location.href.split('?')[0] + '#/register')
            window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf873bd7fdb2bd0be&redirect_uri=' + url1 + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
        },
        getOpenId () {
            // 登录
            var that = this
            var code = window.location.href.split('&')[0].split('=')[1]
            //              url: 'http://wx-api.1safety.cc/api/auth/login',
            $.ajax({
                url: `http://m.api.1safety.cc/api/auth/login?code=${code}&isgame=a`,
                type: 'get',
                dataType: 'json',
                async: true,
                timeout: 30000,
                success: function (data) {
                    if (data != null && data.code != null && data.code == 200) {
                        that.openid = data.data.wxOpenid
                        that.loginJson = data.data
                        that.weChatName = data.data.nickname
                        that.weChatUrl = data.data.headimg
                        that.$store.commit("setOpenId", that.openid);
                    } else {
                        that.$message.warning(data.message)
                    }
                },

            })
        },
        startUpload () {
            if (!this.openid) {
                return false;
            }
            var that = this
            var param2 = JSON.parse(localStorage.uploadParam)
            param2.createUserId = this.openid
            param2.weChatName = this.weChatName
            param2.weChatUrl = this.weChatUrl

            var reqUrl = localStorage.getItem('ApiUrl') + 'threat/save'
            that.$ajax.post(reqUrl, param2, {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8'
                }
            })
                .then(function (res) {
                    var obj = res.data
                    if (obj.code == 0) {
                        that.clearStorage()
                        that.$router.replace('/')
                    } else {
                        that.titContent = obj.msg
                        that.flag1 = true
                    }
                })
                .catch(function (res) {
                })
        },
        clearStorage () {
            var arr = ['uploadImg', 'coordInfos', 'trade', 'uploadParam']
            arr.map(function (item) {
                localStorage.removeItem(item)
            })
        },
    }
}
</script>
<style lang="less">
.set {
    .tit {
        height: 6rem;
        display: flex;
        align-items: center;
        p {
            font-size: 16px;
            font-weight: 800;
        }
        i {
            color: red;
            font-size: 30px;
            padding: 0 2rem 0 3rem;
        }
    }
    height: 100%;
    width: 100%;
    padding: 0 4%;
    .newADD {
        position: absolute;
        border: 1px solid #000000;
        .left {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            padding: 0;
            text-align: center;
            line-height: 20px;
            float: left;
            border: 1px solid #000000;
            margin: -10px;
        }
    }
    .setContainer {
        display: inline-block;
        position: relative;
        border: 1px solid #ccc;
        width: 100%;
        padding-bottom: -100px;
        img {
            display: block;
            width: 100%;
        }
        #targetObj {
            width: 100px;
            height: 100px;
            position: absolute;
            transform-origin: center;
            border: 1px solid #000000;
            .left {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: #fff;
                padding: 0;
                text-align: center;
                line-height: 20px;
                float: left;
                border: 1px solid #000000;
                margin: -10px;
            }
            .right {
                width: 20px;
                height: 20px;
                text-align: center;
                line-height: 20px;
                font-size: 30px;
                color: red;
                float: right;
                margin: -10px;
            }
        }
    }
    .title {
        display: flex;
        padding: 0 20px;
        justify-content: space-between;
        border-bottom: 1px solid #ccc;
        span {
            line-height: 40px;
            font-size: 16px;
            display: flex;
            align-items: center;
            i {
                font-style: normal;
                font-size: 30px;
            }
        }
    }
    input {
        width: 100%;
        height: 5rem;
        text-indent: 1rem;
        margin-top: 1rem;
        border-radius: 0.5rem;
        color: #000000;
        font-size: 1.5rem;
        border: 1px solid #ccc;
    }
    .setBtn {
        margin: 1rem 0;
        display: flex;
        justify-content: space-between;
        border-bottom: 0;
        span {
            display: inline-block;
            background: #6495ed;
            line-height: 3rem;
            width: 14rem;
            font-size: 1.5rem;
            color: #fff;
            text-align: center;
            border-radius: 1.5rem;
        }
    }
}
</style>